<template>
  <div class="app-container">
    <el-row class="search">
      <el-select v-model="query.t" style="margin-right: 8px; width: 120px" placeholder="日期类型">
        <el-option v-for="item in [
          { label: '出院日期', value: '出院日期' },
          { label: '入院日期', value: '入院日期' }
        ]" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-date-picker v-model="query.stime" style="width: 150px" type="date" placeholder="开始" value-format="yyyy-MM-dd">
      </el-date-picker>
      <span>-</span>
      <el-date-picker v-model="query.etime" style="width: 150px" type="date" value-format="yyyy-MM-dd" placeholder="结束">
      </el-date-picker>

      <el-select v-model="query.size" placeholder="排名前" style="margin-left: 5px; width: 100px; margin-right: 10px">
        <el-option v-for="item in [
          {
            label: '5',
            value: '5'
          },
          {
            label: '10',
            value: '10'
          },
          {
            label: '20',
            value: '20'
          },
          {
            label: '100',
            value: '100'
          },
          {
            label: '10000',
            value: '10000'
          }
        ]" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-input v-model="query.s" prefix-icon="el-icon-search" style="width: 150px" placeholder="诊断、编码"
        @keyup.enter.native="search"></el-input>

      <el-button type="warning" @click="search" round>搜&nbsp;&nbsp;索</el-button>

      <el-button type="warning" style="margin-left: 8px" v-if="leavel != 0" @click="goBack" round>《返回</el-button>
    </el-row>
    <el-row>
      <h4 style="color: red;">{{ showHeader }}</h4>
    </el-row>
    <el-row>
      <el-table :data="ls" @sort-change="sort_change" stripe @row-dblclick="row_dblclick" style="width: 100%"
        v-loading="sLoading">
        <el-table-column v-for="item in showCols" :key="item.p" :label="item.l" :prop="item.p" fixed
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="病例数" sortable label="病例数">
        </el-table-column>
        <el-table-column label="平均总费用">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.标准总费用, scope.row.病例数)" placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.总费用, scope.row.标准总费用),
                ffblue: IsBlue(scope.row.总费用, scope.row.标准总费用)
              }">{{ 比例(scope.row.总费用, scope.row.病例数) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="平均床日">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.标准床日, scope.row.病例数)" placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.总床日, scope.row.标准床日),
                ffblue: IsBlue(scope.row.总床日, scope.row.标准床日)
              }">{{ 比例(scope.row.总床日, scope.row.病例数) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="药品消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.药品费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准药品费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.药品费, scope.row.标准药品费),
                ffblue: IsBlue(scope.row.药品费, scope.row.标准药品费)
              }">{{ 比例(scope.row.药品费, scope.row.标准药品费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="检验消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.检验费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准检验费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.检验费, scope.row.标准检验费),
                ffblue: IsBlue(scope.row.检验费, scope.row.标准检验费)
              }">{{ 比例(scope.row.检验费, scope.row.标准检验费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="检查消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.检查费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准检查费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffblue: IsBlue(scope.row.检查费, scope.row.标准检查费),
                ffred: IsRed(scope.row.检查费, scope.row.标准检查费)
              }">{{ 比例(scope.row.检查费, scope.row.标准检查费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="治疗消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.治疗费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准治疗费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffblue: IsBlue(scope.row.治疗费, scope.row.标准治疗费),
                ffred: IsRed(scope.row.治疗费, scope.row.标准治疗费)
              }">{{ 比例(scope.row.治疗费, scope.row.标准治疗费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="耗材消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.耗材费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准耗材费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.耗材费, scope.row.标准耗材费),
                ffblue: IsBlue(scope.row.耗材费, scope.row.标准耗材费)
              }">{{ 比例(scope.row.耗材费, scope.row.标准耗材费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="手术消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.手术费, scope.row.病例数) +
              '/' +
              比例(scope.row.标准手术费, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.手术费, scope.row.标准手术费),
                ffblue: IsBlue(scope.row.手术费, scope.row.标准手术费)
              }">{{ 比例(scope.row.手术费, scope.row.标准手术费) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="CMI">
          <template slot-scope="scope">
            <span v-bind:class="{
              ffred: IsRed(scope.row.CMI, 1),
              ffblue: IsBlue(scope.row.CMI, 1)
            }">{{ scope.row.CMI.toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="时间消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.总床日, scope.row.病例数) +
              '/' +
              比例(scope.row.标准床日, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.总床日, scope.row.标准床日),
                ffblue: IsBlue(scope.row.总床日, scope.row.标准床)
              }">{{ 比例(scope.row.总床日, scope.row.标准床日) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="费用消耗">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="比例(scope.row.总费用, scope.row.病例数) +
              '/' +
              比例(scope.row.标准总费用, scope.row.病例数)
              " placement="right">
              <span v-bind:class="{
                ffred: IsRed(scope.row.总费用, scope.row.标准总费用),
                ffblue: IsBlue(scope.row.总费用, scope.row.标准总费用)
              }">{{ 比例(scope.row.总费用, scope.row.标准总费用) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">图表分析</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { zdjb } from "@/api/patient";
import { Message, MessageBox, Row, Loading } from "element-ui";
import { RouteRecord, Route } from "vue-router";
import { getVersionName } from "@/utils/Utils";
import { UserModule } from "@/store/modules/user";
import axios from "axios";
import { setCookie, getCookie } from "@/utils/cookies";
import { Format } from "@/utils/Utils";
import { throttleAfterHits } from "handsontable/helpers";
@Component({
  name: "drgzdjb"
})
export default class extends Vue {
  private GrpCondition: any = {
    0: {
      grp: 'b.路径名称,b.分组编码,a.路径ID',
      cols: [
        {
          p: '路径名称',
          l: '主要诊断名称',
          c: 'a.路径ID'
        },
        {
          p: '分组编码',
          l: '病组编码',
        }
      ]
    },
    1: {
      grp: '科室,医生',
      cols: [
        {
          p: '科室',
          l: '科室'
        },
        {
          p: '医生',
          l: '医生'
        }
      ]
    }
  }
  private leavel: any = 0;
  public query = {
    t: "出院日期",
    stime: "" || this.$route.query.stime,
    etime: this.$route.query.etime || Format("yyyy-MM-dd", new Date()),
    size: "10",
    grp: this.GrpCondition[this.leavel].grp,
    order: "病例数 desc",
    s: "",
    w: ''
  };
  private showCols = this.GrpCondition[this.leavel].cols;
  private showHeader = '';
  private goBack() {
    this.showHeader = ''

    this.leavel = this.leavel - 1;
    this.showCols = this.GrpCondition[this.leavel].cols;
    this.query.grp = this.GrpCondition[this.leavel].grp;
    this.query.w = '';
    this.search();
  }
  private 路径名称 = '';
  private 分组编码 = '';
  private row_dblclick(r: any) {

    if (this.leavel == 1) {
      this.$router.push({
        path: "/clinicalpathway/user",
        query: {
          路径名称: this.路径名称,
          病组编码: this.分组编码,
          deptValue: r.科室,
          doctorValue: r.医生,
          t: this.query.t,
          stime: this.query.stime,
          etime: this.query.etime,
          st: "是否评估"
        }
      });
      return;
    }
    this.路径名称 = r.路径名称 || this.路径名称;
    this.分组编码 = r.分组编码 || this.分组编码;
    let w = this.GrpCondition[this.leavel].cols.map((c: any) => {
      let p = (c.c || c.p);
      p = p.split('.');
      p = p[1] || p[0];
      return `${(c.c || c.p)}='` + r[p] + "'"
    }).join(' AND ')

    this.showHeader = this.GrpCondition[this.leavel].cols.map((c: any) => `${c.l}=${r[c.p]}`).join("；")

    this.leavel = this.leavel + 1;
    this.showCols = this.GrpCondition[this.leavel].cols;
    this.query.grp = this.GrpCondition[this.leavel].grp;
    this.query.w = w;
    this.search();
  }

  private handleClick(r: any) {
    //console.log(row)
    if (this.leavel > 0) return;
    this.$router.push({
      path: "/clinicalpathway/zdjbbar",
      query: {
        路径名称: r.路径名称,
        病组编码: r.分组编码,
        路径id: r.路径ID,
        t: this.query.t,
        stime: this.query.stime,
        etime: this.query.etime,
        st: "是否评估",
        ljid: r.路径ID
      }
    });
  }
  private IsRed(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r > 1.2) return true;

    return false;
  }
  private IsBlue(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r < 0.8) return true;

    return false;
  }
  private 比例(v1: number, v2: number, c: string) {
    let r = (v1 / v2) * 1.0;
    console.log("比例:", v1, v2, r);
    if (r == Infinity) {
      return "∞";
    }

    if (isNaN(r)) {
      return "";
    }
    return r.toFixed(2);
  }

  private created() {
    let cDate = new Date();
    let m = cDate.getMonth() - ((<any>window).MyConf["TIMEINTERVAL"] || "1");
    cDate.setMonth(m);
    if (!this.query.stime) {
      this.query.stime = Format("yyyy-MM-dd", cDate);
    }
    this.search();
  }

  private ls: Array<any> = [];

  private sLoading: boolean = true;
  private sort_change(p: any) {
    let prop = p.prop;
    let order = p.order;
    order = order == "ascending" ? "asc" : "desc";
    this.query.order = `${prop} ${order}`;
    this.search();
  }
  private async search() {
    this.sLoading = true;
    const { data } = await zdjb(this.query);
    this.ls = data;
    //console.log(data);
    this.sLoading = false;
  }
}
</script>
